<template>
	<view class="cateshop-contanier">
		<view class="search flex" @click="toSearch">
			<u-search bgColor="#f2f2f2" placeholder="请输入关键字..." disabled height="30" :clearabled="true" :showAction="false"
				v-model="keyword">
			</u-search>
		</view>
		<scroll-view class="menu-content-left" :scroll-y="true" scroll-with-animation :scroll-top="scrollTop">
			<view class="item" :class="{ active: curIndex == index }" v-for="(item, index) in cateData" :key="index"
				@click="handleSelectNav(index)"><text>{{item.name}}</text></view>
		</scroll-view>
		<view class="shop-content-right">
			<view class="shop-top flex-sb">
				<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
					<text>综合</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'sales_actual' }"
					@click="handleSortType('sales_actual')">
					<text>销量</text>
				</view>
				<view class="sort-item sort-item-price flex-sb" :class="{ active: sortType === 'goods_price_min' }"
					@click="handleSortType('goods_price_min')">
					<text>价格</text>
					<view class="price-arrow flex flex-column">
						<unt-icon name="icon-paixujiantoushang" :style='{marginBottom: "-10px"}' size="16"
							:color="sortType === 'goods_price_min' && !sortPrice?'#01ab36':'#000'"></unt-icon>
						<unt-icon name="icon-paixujiantouxia" :style='{marginTop: "-10px"}' size="16"
							:color="sortType === 'goods_price_min' && sortPrice?'#01ab36':'#000'"></unt-icon>
					</view>
				</view>
			</view>
			<scroll-view class="shop-bottom" :scroll-y="true" @scrolltolower="nextPageSize(curIndex)">
				<unt-shop-list v-if="listData.length" :data="listData" imgWidth="200rpx" imgHeight="200rpx"
					mode="list"></unt-shop-list>
				<!-- 空 -->
				<unt-empty v-else type="cate"></unt-empty>
				<!--空  -->
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import * as Cate from '@/api/cate/index.js'
	import * as Goods from '@/api/goods/index.js'
	const pageSize = 10
	export default {
		data() {
			return {
				options: {},
				scrollTop: 0,
				sortType: 'all', // 排序类型
				sortPrice: false, // 价格排序 (true高到低 false低到高)
				curIndex: 0,
				cateData: [],
				listData: [],
				// 上拉加载配置
				upOption: {
					page: 1,
					size: pageSize
				}
			}
		},
		onLoad(options) {
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData();
		},
		methods: {
			getPageData() {
				const app = this
				app.isLoading = true
				Promise.all([Cate.List({
						parentId: this.options.id
					})])
					.then(result => {
						app.cateData = [{id:'',name:"全部"},...result[0].data];
						app.getGoodsListData(0)
					}).finally(() => app.isLoading = false)
			},
			getGoodsListData(index) {
				let data = {
					category: this.cateData[index].id==""?this.getCateIds():this.cateData[index].id,
					orderKey: this.sortType == 'all' ? '' : this.sortType,
					orderType: this.sortPrice ? 'asc' : 'desc',
					pageSize: this.upOption.size,
					pageNum: this.upOption.page,
					status:10
				}
				Goods.list(data).then(result => {
					this.listData = result.data.list;
				}).catch()
			},
			getCateIds(){
				const ids=this.cateData.filter(({ id }) => id !== "").map(({ id }) => id);
				return ids.toString();
			},
			// 切换排序方式
			handleSortType(newSortType) {
				const index = this.curIndex;
				const newSortPrice = newSortType === 'goods_price_min' ? !this.sortPrice : true;
				this.sortType = newSortType;
				this.sortPrice = newSortPrice;
				this.getGoodsListData(index);
			},
			handleSelectNav(index) {
				this.curIndex = index;
				this.scrollTop = (index * 60 / 2);
				this.getGoodsListData(index);
			},
			nextPageSize(index) {
				this.upOption.size += 10;
				this.getGoodsListData(index);
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages_moon/search/search"
				})
			},
		},
		// 触底的事件
		onReachBottom() {
			console.log(this.upOption.page)
		},
	}
</script>

<style lang="scss" scoped>
	.cateshop-contanier {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;

		.search {
			width: 100%;
			padding: 0px 20rpx;
			margin-bottom: 5rpx;
		}

		.menu-content-left {
			width: 180rpx;
			height: 100vh;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #F2F2F2;

			.item {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				text-align: center;
				padding: 40rpx 10rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.active {
				position: relative;
				background: #fff;
				color: #01ab36;
			}

			.active:before {
				content: "";
				position: absolute;
				top: 25%;
				left: 0rpx;
				width: 10rpx;
				height: 50%;
				border-radius: 10rpx;
				background-color: #01ab36;
			}
		}

		.shop-content-right {
			width: calc(100% - 180rpx);
			height: 100vh;
			overflow: hidden;
			background: #F6F6F6;
			padding-bottom: 100rpx;

			.shop-top {
				padding: 20rpx;
				background-color: #fff;
				box-shadow: 0 6rpx 20rpx #f2f3f4;

				.sort-item {
					padding: 10rpx;
					border-radius: 10rpx;
					background: #fff;
					font-size: 28rpx;
				}

				.active {
					color: #01a601;
				}
			}

			.shop-bottom {
				overflow-x: hidden;
				overflow-y: auto;
				background-color: #fff;
				height: 100%;
			}
		}

		// 
	}
</style>